
/* icon */
@import "https://at.alicdn.com/t/font_2559410_7ih6tcqtq07.css?spm=a313x.7781069.1998910419.47&file=font_2559410_7ih6tcqtq07.css";
//配置全局样式(需要去vite.config.ts配置一下)
@red:#ec4141;//鲜红提醒色
@theme: #e1b7cc;  //主题色
@lightTheme:#efd5e2;//高亮主题色
@pink: #fbecf5;
//@shallowTheme: #fdf6fa; //超浅的粉色
@shallowTheme: #fff6fa; //超浅的粉色
@pinkFont: #b56f91;
@lightFontColor: #a2a2a2; //浅灰色
@lightFontColor2: #c4c4c9; //浅灰色
@fontColor: #424242; //文字颜色
@fontColor2: #646464; //文字颜色
@left:20px;//左边距
@right:120px;//右边距
@white: rgba(255, 255, 255, 0.86);
//歌单详情页面，tab内容高度
@height1:380px;
.mt20{
  margin-top: 20px;
}
html,body,#app{
  width: 100%;
  height: 100%;
  min-width: 1200px;
  overflow-y: hidden;
  color:@fontColor
}
//主要内容区域(tab栏下面区域)
.content {
  overflow: hidden;
  height: 100%;
}

.content-view {

  padding:30px ; /*配置主要内容区域padding*/
  padding-bottom: 0;
  width: 100%;
  height: calc(100% - 110px);
  overflow-y: scroll;

}
.content-scroll{
  //height: calc(100% - 110px);
}
img{
  object-fit: cover;
}
//修改消息框颜色
.el-message--info{
  //background-color: rgba(0, 0, 0, 0.65) !important;
  background-color: rgba(175, 85, 129, 0.54) !important;
  color: @white!important;
  border:0!important;
}
.el-loading-spinner .el-loading-text{

  text-align: center;
}
.el-loading-mask{
  z-index:9!important;
}
.el-message--info .el-message__content {
  color: @white!important;

}
.el-message--info .el-icon {
  width:0;
  height: 0;
}
.el-avatar{
  cursor: pointer;
}
.iconfont{
  cursor: pointer;
}
.user-name{
  color:#7a91c2;
  cursor:pointer;
}
img{
  width: 100%;
  height: 100%;

}
//按钮样式
.pink-btn,.white-btn{
  img {
    width: 20px;
    height: 20px;
  }

  padding: 0 20px;
  height: 35px;
  margin-right: 20px;
  border-radius: 30px;

  .iconfont {
    font-size: 14px
  }
}
.pink-btn{
  background-color: @theme;
  color: #fff;
}
.pink-btn:hover{
  background-color: @lightTheme;
}
.white-btn{
  background-color: #fff;
  color:@fontColor;
  border: 1px solid @lightTheme;
}
.white-btn:hover{
  background-color: @shallowTheme;
}
//小tag标签(有边框的空心)
.tag{

  font-size:12px;
  color: #d396b3;
  border:1px solid #d396b3;
  max-height: 17px!important;
  line-height: 13px;

  padding-left:4px;
  padding-right:4px;
  border-radius:4px;
  margin-right: 10px;
  margin-top: 2px;
}
//实心标签
.tag2{
  display: inline-block;
  height: 25px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 30px;
  text-align: center;
  line-height: 25px;
  font-size: 13px;
  background-color: #fbecf5;
  //margin-top: 15px;
}
//禁用按钮
.btn-disabled{
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
  border: 1px solid #d9d9d9;
  color: #b1b1b1;
}
.btn-disabled:hover{
  background-color: #fff;
 
}


//歌手名字
.artist-name:hover {
  color: #626262;
}

.artist-name {
  cursor: pointer;
}
.vip-tag {
  color: #fe703b;
  border-color: #fe703b;

}

//单行省略号
.long-text {

  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;

}

//多行文字省略号
.long-text2 {
  overflow-wrap: break-word;
  /*就是下面这一句，好像网上没有这一个的说明，但是浏览器都支持*/
  word-break: break-word;
  word-wrap: break-word;
  display: -webkit-box;
  overflow: hidden;
  /*autoprefixer: off;*/
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; //设置几行
}

#app{

  overflow: hidden;
}
:deep(.el-dialog){
  box-shadow: #00000073 0px -1px 10px;
}
.iconfont {
  margin: 5px !important;
  font-weight: 400;
}

.font-weight {
  font-weight: 700;
  color:@fontColor;
  font-size: 20px;
}
/* 整个滚动条 */
::-webkit-scrollbar {
  /* 对应纵向滚动条的宽度 */
  width: 8px;
  /* 对应横向滚动条的宽度 */
  height: 10px;
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
  background-color: @lightTheme;
  border-radius: 32px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: @shallowTheme;
  border-radius: 32px;
}
//布局行最小宽度
.el-row{
  min-width: 900px;
}
//图片禁止拖动
img{
  -webkit-user-drag: none;
}
//选择类型工具栏
.sort-tool{
  display: flex;
  justify-content: space-between;
  //margin: 20px 0 ;
  margin-bottom: 20px;
}
//选中的类型
.active-kind{
  background-color:@shallowTheme;
  color: @pinkFont;
  border-radius:30px;
}

.text{
  color: @fontColor;
}

//多排类别（参考歌手页面）
.kinds{
  margin-bottom: 25px;
  margin-top: -10px;
  >div{
    display: flex;
    margin-bottom: 10px;
    span{
      margin-top: 5px;
      min-width: 50px;
      vertical-align: middle;
    }
  }
}
.el-pagination{
  padding-bottom: 30px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}
//分页
.pagination{
  :deep(.el-pagination.is-background .el-pager li) {
    color: @fontColor;
  }
  :deep(.el-pagination.is-background .el-pager li:hover) {
    background-color: @pink ; //修改默认的背景色
  }
  :deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
    background-color: @lightTheme; //修改默认的背景色
  }
  :deep(.el-pagination.is-background .btn-next), :deep(.el-pagination.is-background .btn-prev), :deep(.el-pagination.is-background .el-pager li){
    background-color: @shallowTheme;
  }
}
//对话框
.el-dialog__header,.el-dialog__body,.el-dialog__footer{
  text-align: center!important;
  
}
.icon-dianzan{
 color: @theme;
}
//loading占位盒子
.loading-box{
  margin-top: 50px;

}
//详情描述文字
.description{
  line-height: 28px;
  word-break: break-all!important;
  //text-indent:2em;
  display: block;
  word-wrap: break-word!important;

  white-space: pre-wrap!important;
}
